<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .picture {
            border: 1px solid black;
            height: 100px;
            width: 100px;
            margin-bottom: 20px;
        }
        button {
            margin-top: 5px;
            margin-bottom: 5px;
        }
        input {
            margin-top: 5px;
            margin-bottom: 5px;
        }
        img {
            height: 100px;
            width: 100px;
        }
        .email {
            display: none;
        }
    </style>
</head>
<body>
<h1>user info</h1>
<p>id: {{ .id }}</p>
<p>user_name: {{ .user_name }}</p>
<p>
    email: {{ .email }}
    <button
        class="inline-button"
        style="display:inline;margin-left:15px;display:inline-block;"
        onclick="displayEditEmail()">
        修改
    </button>
    <div class="email">
        <form action="/user/email/edit/{{ .id }}" method="post">
            <input type="text" name="email">
            <button type="submit">提交</button>
        </form>
    </div>
</p>
<p>picture: </p>
<div class="picture">
    <img src="/static/user/info/picture/{{ .picture }}" alt="">
</div>
<form action="/user/info/upload/picture"
    method="post"
    enctype="multipart/form-data">
    <input type="file" name="picture"><br>
    <input type="submit">
</form>
<button><a href="/">返回</a></button>
<script>
    function displayEditEmail() {
        var emailDiv = document.querySelector(".email");
        emailDiv.style.display = emailDiv.style.display === "none" ? "block" : "none";
    }
</script>
</body>
</html>